<template>
  <div style="width: 100%;height: 100%;">
    <Chart :cdata="cdata" :id="'main' + index"/>
  </div>
</template>

<script>
  import Chart from './chart.vue'
  export default {
    data () {
      return {
        cdata: {
          legendList: [],
          xAxisList: [],
          seriesList: [],
        },
        drawTiming: null
      }
    },
    components: {
      Chart,
    },
    props: {
      configCode: {
        type: String,
        default: ''
      },
      index: {
        type: Number,
        default: 0
      }
    },
    mounted () {
      this.drawTimingFn()
    },
    beforeDestroy () {
      clearInterval(this.drawTiming);
      this.drawTiming = null
    },
    methods: {
      drawTimingFn () {
        this.queryData();
        this.drawTiming = setInterval(() => {
          this.queryData();
        }, 17000);
      },
      queryData() {
        this.$http.get("/visShow/queryData", {
          params: {
            configCode: this.configCode,
            index: this.index
          }
        }).then(res => {
          const {data} = res
          console.log(data, '柱状图一')
          if (data.status == 200) {
            // const temData = data.object.seriesList
            // for (let i = 0; i < temData.length; i++) {
            //   this.cdata.legendList.push(temData[i].name)
            //   temData[i].type = 'bar'
            //   temData[i].barWidth = 10
            //   temData[i].itemStyle = {
            //     normal: {
            //       barBorderRadius: 5,
            //       color: "#FFC328"
            //     }
            //   }
            //
            // }
            this.cdata.seriesList = data.object.value
            this.cdata.xAxisList = data.object.name
          }
        })
      }
    }
  };
</script>

<style lang="scss" scoped>
</style>
